<template>
  <button @click="btnClick">加-count:{{ count.num }}</button>
</template>

<script>
import { ref, readonly } from 'vue'
export default {
  setup(props, { emit, slots, attrs }) {
    // Proxy劫持
    const info = { name: 'zjd' }
    const infoProxy = new Proxy(info, {
      get(target, key) {
        return target[key]
      },
      set(target, key, value) {
        console.log(target, key, value)
        // target[key] = value
        // 严格模式下Proxy的set函数必须返回true
        return true
      },
    })
    console.log(infoProxy.name)
    infoProxy.name = 'hq'
    console.log(infoProxy.name)
    //////////////////////////////////////////////////////////////

    // readonly劫持set方法,无法被修改
    const count = ref({
      num: 10,
    })
    const countInfo = readonly(count)
    const btnClick = () => {
      count.value.num +=  1
      console.log(countInfo.value)
      countInfo.value.num = 20
    }
    return {
      count,
      btnClick,
    }
  },
}
</script>
<style scoped></style>
